<template>
	<view>
	<!-- 	<view class="order-nav">
			<view class="list" v-for="(item, index) in list" :data-index="index" :class="index == select ? 'menucolor' : ''" @tap="setNavMenu">
				{{ item.name }}
			</view>
		</view> -->
		<!-- <view class="time_box">
			<view class="title">排名时间</view>
			<view class="time" v-if="listData[0].sta">{{listData[0].sta}}-{{listData[0].end}}</view>
		</view> -->
		<view class="ad_item">
			<view class="ad_img_item">
				<swiper class="ad_swiper_box" :circular="true" :autoplay="true" :interval="3000" :duration="200" indicator-dots="true" indicator-color="#d1d1d1" indicator-active-color="#4d726f">
					<block v-for="(item, index) in adImgArr" :key="'ad_'+index">
						<swiper-item class="ad_s_box" :data-item="item"  @click="gotopage3">
							<image class="ad_img" :src="item.image"></image>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
		
		<view class="mainItem" v-if="listData.length>0">
			<view class="m_row m_title">
				<view class="m_line">排名</view>
				<view class="m_line m_line2">用户</view>
				<view class="m_line m_line_r">获得积分</view>
			</view>
			<view class="m_row" v-if="listData[0]">
				<view class="m_line"><image src="../../static/rank/no_1.png" mode="widthFix"></image></view>
				<view class="m_line m_line2 m_line_r_color"><span>{{listData[0].name}}</span></view>
				<view class="m_line m_line_r m_line_r_color">{{listData[0].money}}</view>
			</view>
			<view class="m_row" v-if="listData[1]">
				<view class="m_line"><image src="../../static/rank/no_2.png" mode="widthFix"></image></view>
				<view class="m_line m_line2 m_line_r_color"><span>{{listData[1].name}}</span></view>
				<view class="m_line m_line_r m_line_r_color">{{listData[1].money}}</view>
			</view>
			<view class="m_row" v-if="listData[2]">
				<view class="m_line"><image src="../../static/rank/no_3.png" mode="widthFix"></image></view>
				<view class="m_line m_line2 m_line_r_color"><span>{{listData[2].name}}</span></view>
				<view class="m_line m_line_r m_line_r_color">{{listData[2].money}}</view>
			</view>
			<view class="m_row" v-for="(item,index) in listData.slice(3,99999)" :key="'row_'+index">
				<view class="m_line">{{index + 4}}</view>
				
				<view class="m_line m_line2 m_line_r_color">						
						<span v-if="item.name">{{item.name}}</span>
						<span v-if="!item.name">游客</span>
				</view>
				<view class="m_line m_line_r m_line_r_color">{{item.money}}</view>
			</view>
		</view>
		
		

	</view>
</template>

<script>
	export default {
		data() {
			return {
				select:0,
				phone:'',
				vx:'',
				adImgArr:[],
				listData:[
					// {name:'名字1',number:'10'},
					// {name:'名字2',number:'10'},
					// {name:'名字3',number:'10'},
					// {name:'名字4',number:'10'},
					// {name:'名字5',number:'10'},
					// {name:'名字6',number:'10'},
				],
				list: [
					{
						name: '周排行',
					},
					{
						name: '月排行',
					},
					{
						name: '季排行',
					},
				],

			}
		},
		onLoad() {
			let me = this;
					
			
					
			me.Net._get('paihanlist',{},(res)=>{
				if(res.code ==1){
					me.adImgArr = res.data.ads;
					me.listData=res.data.panhan
				}
			});	
		},
		methods: {
			setNavMenu(e) {
				this.select = e.currentTarget.dataset.index;
				let num=0;
					let me = this;
				if(this.select==0)num=7;
						if(this.select==1)num=30;
								if(this.select==2)num=90;
				me.Net._get('paihanlist',{type:num},(res)=>{
					if(res.code ==1){
						me.listData=res.data
						
					  console.log(res.data)
					}
				});	
			},
			gotopage(e){
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url:url
				})
			},
			openPhone(){
						let me = this;
				uni.showModal({
				    title: '客服热线',
				    content:me.phone,
				    success: function (res) {
				        if (res.confirm) {
				            //console.log('用户点击确定');
							uni.makePhoneCall({
							    phoneNumber:me.phone//仅为示例
							});
				        } else if (res.cancel) {
				            //console.log('用户点击取消');
				        }
				    }
				});
			},
			gotopage3(e){
				let item = e.currentTarget.dataset.item;
				this.gotopage1(item);
			},
	gotopage1(item) {
				var that = this;
				if (item.type == 1) {
					uni.navigateTo({
						url: '/pages/goods/goods?id=' + item.t_id
					});
				} else if (item.type == 2) {
					uni.navigateTo({
						url: '/pages/news/news?type=' + item.t_id
					});
					
				} 
				else if (item.type == 3) {
					uni.navigateTo({
						url: '/pages/list/list?cid=' + item.t_id
					});
					
				} 
				else if (item.type == 4) {
					uni.navigateTo({
						url: '/pages/list/list?type=' + item.t_id
					});
				
				} 
				else if (item.type == 5) {
					uni.navigateTo({
						url: '/pages/list/list?marks=' + item.t_id
					});	
					}
				else {
					return;
				}
			}
		}
	}
</script>


<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	
	.ad_item{
		width: 100%;
		.ad_img_item{
			width: 100%;
			height: 320rpx;
			position: relative;
			z-index: 3;
			padding: 0 30rpx;
			margin-top: 30rpx;
			margin-bottom: 20rpx;
			display: inline-block;
			.ad_swiper_box{
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
				overflow: hidden;
				.ad_s_box{
					width: 100%;
					height: 100%;
					.ad_img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	
	.bg_img{
		width: 100%;
		text-align: center;
		margin-top: 50px;
	}
	
	.bg_img image{
		width: 50%;
	}
	
	.title{
		font-size: 20px;
		color: #666;
		text-align: center;
		line-height: 34px;
	}
	
	.line{
		width: 50px;
		height: 2px;
		background-color: #E49B27;
		margin: 0 auto;
	}
	
	.text{
		width: 80%;
		margin: 0 auto;
		font-size: 14px;
		color: #999;
		text-align: center;
		margin-top: 20px;
		line-height: 20px;
	}
	
	.mainItem{
		width: 100%;
		background: #fff;
		padding: 30rpx 4%;
		.m_row{
			width: 100%;
			padding: 20rpx 20rpx;
			display: flex;
			align-items: center;
			.m_line{
				width: 65rpx;
				font-size: 28rpx;
				color: #9CA0A3;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 55rpx;
					height: 65rpx;
				}
				image{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
			.m_line2{
				flex: 1;
				padding-left: 100rpx;
				justify-content: flex-start;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				span{
					
				}
			}
			.m_line_r{
				width: 120rpx;
				justify-content: flex-end;
			}
			.m_line_r_color{
				color: #3C4044;
				font-weight: bold;
			}
		} 
		.m_title{
			background: #fff;
		}
	}
	
	.order-nav {
		width: 94%;
		margin: 4% auto;
		height: 12vw;
		display: flex;
		.list {
			width: 32%;
			height: 12vw;
			line-height: 12vw;
			border-radius: 2vw;
			box-sizing:border-box;
			border:1px solid #e8e8e8;
			text-align: center;
			margin-left: 2%;
			

		}
	}
	
	.order-nav .list:nth-child(1){
		margin-left: 0;
	}
	
	.menucolor{
		border: none;
		background-color: #4d726f;
		color: #fff;
	}
	.time_box{
		width: 100%;
		background-color: #fff;
		padding: 2vw 4%;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f5f5f5;
	}
	
	.time_box .title{
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
	}
	
	.time_box .time{
		font-size: 3.5vw;
		color: #666;
	}
	
	
	
	
	

</style>
